<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<!-- 准备好一个容器，承载整个react -->
	<div id="root"></div>

	<!-- react核心库 -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<!-- 支持react操作dom -->
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<!-- 将jsx转为js -->
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

	<script type="text/babel">
		// 创建类式组件
		class MyComponent extends React.Component {
			render() {
				return (
					<h1>我是用类定义的组件（适用与【复杂组件】的定义）</h1>
				)
			}
		}
		// 渲染组件到页面
		ReactDOM.render(<MyComponent/>, document.getElementById('root'))
		/*
			ReactDOM.render(<MyComponent/>, ......)
				1.React解析组件标签，找到了MyComponent组件。
				2.发现组件是使用类定义的，随后new出来该类的实例对象，并通过该实例调用原型上的render方法。
				3.将render返回的虚拟DOM转为真是DOM，随后呈现在页面中
		*/
	</script>
</body>

</html>